/*
 * @author nojsja
 */

/* -------------- variable -------------- */

// 常用 //
@bodyFont: 16px "Lucida Grande", Helvetica, Arial, sans-serif;
@rootFontSize: 16px;
@green_light: #2de275;
@green: #24a955;
@green_dark: #219d4f;
@red : #d91b09;
@orange: #c85e27;
@orange_light: #fe9746;
@blue: rgba(76, 116, 238, 0.92);
@blue_light: rgba(0, 183, 255, 0.33);
@blue_navy: #1b6b9c;
@blue_dark: #637db5;
@black: #2f2f2f;
@black_dark_light: #3b3d3b;
@black_light: #3b3d3b;
@grey_yellow: #efefef;
@grey_light: #f1f1f1;
@grey: #eaeaea;
@grey_navy_light: #dfdfdf;
@grey_opacity_half: rgba(234, 234, 234, 0.5);
@grey_dark: #737373;
@grey_dark_light: #aaaaaa;
@textShadowColor: #2e3f44;
@boxShadowColor: #4b666e;
@blueGrey: #3f3f3f;
// 临时变量 //
@_green: #45BE95;
@_yellow: #FFBC00;
@_blue: #5BC0E3;
@_light_green: #A2D148;
@_purple: #8B7CCF;
@_grey: #BEDAD3;
@_red: #F14964;

/* -------------- mixin -------------- */

// 环绕阴影
.boxShadowRound (@value:5px, @color: @boxShadowColor) {
  -webkit-box-shadow: 0 0 @value @color;
  -moz-box-shadow: 0 0 @value @color;
  box-shadow: 0 0 @value @color;
}

// 内部阴影
.boxShadowInner (@value:5px, @color: @boxShadowColor) {
  -webkit-box-shadow: 0 0 @value @color inset;
  -moz-box-shadow: 0 0 @value @color inset;
  box-shadow: 0 0 @value @color inset;
}

// 偏移阴影
.boxShadowSide (@value: 5px, @color: @boxShadowColor) {
  -webkit-box-shadow: @value @value 0 @color;
  -moz-box-shadow: @value @value 0 @color;
  box-shadow: @value @value 0 @color;
}

// 向下偏移环绕阴影
.boxShadowRoundSide_bottom (@value: 5px, @color: @black_light) {
  -webkit-box-shadow: 0 @value @value @color;
  -moz-box-shadow: 0 @value @value @color;
  box-shadow: 0 @value @value @color;
}

// 向右偏移环绕阴影
.boxShadowRoundSide_right (@value: 5px, @color: @black_light) {
  -webkit-box-shadow: @value 0 @value @color;
  -moz-box-shadow: @value 0 @value @color;
  box-shadow: @value 0 @value @color;
}

// 环绕偏移阴影
.boxShadowRoundSide (@value: 5px, @color: @boxShadowColor) {
  -webkit-box-shadow: @value @value @value @color;
  -moz-box-shadow: @value @value @value @color;
  box-shadow: @value @value @value @color;
}

// 过度效果
.transition (@attr:all, @time:0.3s, @timeFunction:linear) {
  -webkit-transition: @attr @time @timeFunction;
  -moz-transition: @attr @time @timeFunction;
  -ms-transition: @attr @time @timeFunction;
  -o-transition: @attr @time @timeFunction;
  transition: @attr @time @timeFunction;
}

// 变化效果
.transform (@value: scale(1.0)) {
  -webkit-transform: @value;
  -moz-transform: @value;
  -ms-transform: @value;
  -o-transform: @value;
  transform: @value;
}

// animation 缩写
//animation: name duration timing-function delay iteration-count direction;
// 自定义动画
.animation(@animationName, @animationDuration:2s, @animationTimingFunction: linear, @animationDelay:0s, @animationIteration:infinite, @animationDirection: normal, @animationFillMode: none) {
  -webkit-animation: @animationName @animationDuration @animationTimingFunction @animationDelay @animationIteration @animationDirection;
  -o-animation: @animationName @animationDuration @animationTimingFunction @animationDelay @animationIteration @animationDirection;
  animation: @animationName @animationDuration @animationTimingFunction @animationDelay @animationIteration @animationDirection;
  -webkit-animation-fill-mode: @animationFillMode;
  -moz-animation-fill-mode: @animationFillMode;
  -o-animation-fill-mode: @animationFillMode;
  animation-fill-mode: @animationFillMode;
}

// 呼吸动画
.breathAnimation(@time: 2s, @status: infinite) {
  -webkit-animation: breath @time @status linear;
  -o-animation: breath @time @status linear;
  animation: breath @time @status linear;
  @keyframes breath {
    0% {
      .transform(scale(1.0));
    }
    50% {
      .transform(scale(1.2));
    }
    100% {
      .transform(scale(1.0));
    }
  }
}

// 自旋转动画
.rotateAnimation(@time: 4s, @status: infinite, @deg: 360deg, @delay: 0) {
  -webkit-animation: rotate @time linear @delay @status;
  -o-animation: rotate @time linear @delay @status;
  animation: rotate @time linear @delay @status;
  @keyframes rotate {
    0% {
      -webkit-transform: translateY(0deg);
      -moz-transform: translateY(0deg);
      -ms-transform: translateY(0deg);
      -o-transform: translateY(0deg);
      transform: translateY(0deg);
    }
    100% {
      -webkit-transform: rotateY(@deg);
      -moz-transform: rotateY(@deg);
      -ms-transform: rotateY(@deg);
      -o-transform: rotateY(@deg);
      transform: rotateY(@deg);
    }
  }
}

// 自旋转延迟间隔动画 - 传入的时间应该为动画旋转时间的4倍, 因为延迟会占用3/4
.rotateAnimationDelay(@time: 4s, @status: infinite, @deg: 360deg) {
  -webkit-animation: rotateDelay @time 0s @status;
  -o-animation: rotateDelay @time 0s @status;
  animation: rotateDelay @time 0s @status;
  animation-fill-mode: both;
  @keyframes rotateDelay {
    50% {
      -webkit-transform: translateY(0deg);
      -moz-transform: translateY(0deg);
      -ms-transform: translateY(0deg);
      -o-transform: translateY(0deg);
      transform: translateY(0deg);
    }
    100% {
      -webkit-transform: rotateY(@deg);
      -moz-transform: rotateY(@deg);
      -ms-transform: rotateY(@deg);
      -o-transform: rotateY(@deg);
      transform: rotateY(@deg);
    }
  }
}

// 文字多层重叠特效
.fontMultiOverlay() {
  text-shadow: 0 0 0 rgb(188, 178, 188), 1px 0 0 rgb(173, 163, 173), 2px 0 0 rgb(157, 147, 157), 3px 0 0 rgb(142, 132, 142), 4px 0 0 rgb(126, 116, 126), 5px 0 0 rgb(111, 101, 111), 6px 0 0 rgb(95, 85, 95), 7px 0 0 rgb(79, 69, 79), 8px 0 7px rgba(0, 0, 0, 0.35), 8px 0 1px rgba(0, 0, 0, 0.5), 0 0 7px rgba(0, 0, 0, .2);
}

// 行内断字
.wordBreak(@breakOption) when (@breakOption = break-all) {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: @breakOption;
  word-break: @breakOption;
}

.wordBreak(@breakOption) when (@breakOption = keep-all) {
  -ms-word-wrap: normal;
  word-wrap: normal;
  -ms-word-break: @breakOption;
  word-break: @breakOption;
}

.wordBreak() {
  -ms-word-wrap: normal;
      word-wrap: normal;
      -ms-word-break: normal;
      word-break: normal;
}